<template>
    <div class="base-page">
        <div class="left org">
            <select-org @select="onSelectOrg" />
        </div>
        <!-- 列表 -->
        <div class="right" v-show="viewList === true">
            <div class="e-table">
                <div class="top">
                    <div class="left">
                        <div class="left-btn">
                            <el-button type="primary"
                                @click="goAdd"
                            >新增</el-button>
                            <el-button type="primary"
                            >修改</el-button>
                            <el-button type="primary" class="btn-delete"
                            >删除</el-button>
                            <el-button type="primary"
                            >分配用例</el-button>
                            <el-button type="primary"
                                @click="onDistUser"
                            >分配用户</el-button>
                            <el-button type="primary"
                                @click="onDistPost"
                            >分配岗位</el-button>
                        </div>
                    </div>
                    <div class="search_box">
                        <el-input class="ipt" type="text"
                            placeholder="输入搜索关键字"
                            v-model="searchKey"
                            @select="onSearch"
                            @change="onSearch"
                        ><img src="@/assets/search.png" slot="suffix" @click="onSearch" /></el-input>
                        <div class="adverse">
                            <el-button type="primary">高级搜索</el-button>
                        </div>
                    </div>
                </div>
            </div>
            <el-table
                :style="{width: rightTableWidth}"
                class="table e-table"
                :data="tableData"
                border
                :cell-class-name="cellClsNm"
                ref="tableRef1"
                v-sortTable="{ 'tableData': tableData, '_this': this, 'ref': 'tableRef1' }"
            >
                <el-table-column label="序号" type="selection" width="55"> </el-table-column>
                <el-table-column prop="a1" label="角色名称"> </el-table-column>
                <el-table-column prop="a" label="所属机构" width="200"> </el-table-column>
                <el-table-column prop="a" label="用户名称" width="200"> </el-table-column>
                <el-table-column prop="a" label="用户数" width="200"> </el-table-column>
                <el-table-column prop="a" label="菜单用例数" width="200"> </el-table-column>
            </el-table>
            <Pagination
                :total="paginationInfo.total"
                :pageSize.sync="paginationInfo.pageSize"
                :currentPage.sync="paginationInfo.currentPage"
                :tableData.sync="tableData"
            />
        </div>
        <!-- 新增编辑界面 -->
        <div class="right" v-if="viewList === 'add' || viewList === 'edit'">
            <div class="e-form" style="padding: 0 10px 10px;">
                <div class="tabs-title">新增权限</div>
                <el-form ref="form" :model="formData" label-width="150px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="机构名称：">
                                <el-input v-model="formData.orgName"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="角色名称：">
                                <el-select v-model="formData.currency" filterable placeholder="请选择">
                                    <el-option
                                        v-for="item in currencyOptions"
                                        :key="item.kvId"
                                        :label="item.kvKey"
                                        :value="item.kvValue">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="数据权限：">
                                <el-select v-model="formData.currency" filterable placeholder="请选择">
                                    <el-option
                                        v-for="item in currencyOptions"
                                        :key="item.kvId"
                                        :label="item.kvKey"
                                        :value="item.kvValue">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div class="footer">
                <div class="right-btn">
                    <el-button type="primary"
                        @click="onSave"
                    >保存</el-button>
                    <el-button type="primary"
                        class="btn-delete"
                    >删除</el-button>
                </div>
            </div>
        </div>
        <!-- 分配用户界面 -->
        <div class="right" v-else-if="viewList === 'user'">
            <div class="e-table">
                <div class="top">
                    <div class="left">
                        <div class="left-btn">
                            <el-button type="primary"
                            >选择用户</el-button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="e-form" style="padding: 0 10px 10px;">
                <div class="tabs-title">已分配用户</div>
                <el-table
                    :style="{width: rightTableWidth2}"
                    class="table e-table"
                    :data="tableData2"
                    border
                    :cell-class-name="cellClsNm"
                    ref="tableRef2"
                    v-sortTable="{ 'tableData': tableData2, '_this': this, 'ref': 'tableRef2' }"
                >
                    <el-table-column label="序号" type="selection" width="55"> </el-table-column>
                    <el-table-column prop="a1" label="用户名" width="200"> </el-table-column>
                    <el-table-column prop="a" label="所属机构"> </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 分配岗位界面 -->
        <div class="right" v-else-if="viewList === 'post'">
            <div class="e-table">
                <div class="top">
                    <div class="left">
                        <div class="left-btn">
                            <el-button type="primary"
                            >选择岗位</el-button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="e-form" style="padding: 0 10px 10px;">
                <div class="tabs-title">已分配岗位</div>
                <el-table
                    :style="{width: rightTableWidth2}"
                    class="table e-table"
                    :data="tableData2"
                    border
                    :cell-class-name="cellClsNm"
                    ref="tableRef2"
                    v-sortTable="{ 'tableData': tableData2, '_this': this, 'ref': 'tableRef2' }"
                >
                    <el-table-column prop="a" label="岗位名称"> </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import '@/utils/jquery.scrollTo.min'
import SelectOrg from '@/components/selectOrg'
import Pagination from '@/components/pagination/pagination'
import { debounce } from '@/utils/common'
export default {
    components: {
        Pagination,
        SelectOrg
    },
    data () {
        return {
            viewList: true, // 显示列表还是编辑界面: true 显示列表 false 显示编辑界面
            searchKey: '',
            treeData: [],
            paginationInfo: {
                total: 0,
                pageSize: 20,
                currentPage: 1,
            },
            tableData: [],
            formData: {},
            currencyOptions: [],
            tabsName: 'baseInfo',
            tableData2: [],
            screenWidth: 0,
            screenHeight: 0,
            lastConHeight: 0,
            clickTabFlag: false, // 如果手动点击时，则不做滚动事件逻辑，只有滚动屏幕时才走滚动事件逻辑
            idsTop: []
        }
    },
    computed: {
        // 列表宽度
        rightTableWidth () {
            return (this.screenWidth - 416) + 'px'
        },
        // 分配用户、分配岗位列表宽度
        rightTableWidth2 () {
            return (this.screenWidth - 416) + 'px'
        }
    },
    created () {
        this.getTableData()
    },
    mounted () {
        // 获取屏幕宽高
        this.getScreenInfo()
        window.addEventListener('resize', debounce(this.getScreenInfo))
    },
    methods: {
        getTableData () {

        },
        onSelectOrg (val) {
            console.log('onSelectOrg: ', { ...val })
            this.formData = {
                ...val,
                currency: 10
            }
        },
        cellClsNm ({ column }) {
            if (column.label === '') {
                return 'fixed-left'
            }
        },
        onSearch (e) {
            let searchKey = e
            if (typeof e === 'object') {
                searchKey = this.searchKey
            }
            console.log(searchKey)
        },
        goAdd () {
            this.viewList = 'add'
        },
        onDistUser () {
            this.viewList = 'user'
        },
        onDistPost () {
            this.viewList = 'post'
        },
        onSave () {
            this.viewList = true
            console.log(this.formData)
        },
        getScreenInfo () {
            let screenWidth = document.documentElement.clientWidth || document.body.clientWidth
            let screenHeight = document.documentElement.clientHeight || document.body.clientHeight
            this.screenWidth = screenWidth
            this.screenHeight = screenHeight
        },
    }
}
</script>

<style lang="scss" scoped>
</style>
